html body{
    background: #F3F5F6;
    margin: 0 auto;
    text-align: left;
    position: relative;
    min-width: 1200px;
    overflow-y: hidden;
    height: 100%;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
not supported by any browser */
    font-family: '思源黑体';
}


#wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

#content {
    position: relative;
    height: 100%;
}

/*主体*/
.content-box {
    min-width: 1366px;
    height: calc(100vh - 50px);
    text-align: left;
}

/*左侧*/
.content-box .left-content {
    display: inline-block;
    height: 100%;
    width: 290px;
    background: #353537;
    /* float: left; */
    margin-left: 10px;
    /*box-shadow: 1px 1px 1px #070707;;*/
}

.content-box .left-content.active {
    width: calc(100% - 232px);
    float: right; /*不知道为啥flex右侧会有问题*/
}

/*左侧内容区域*/
.content-box .left-content .content-area {
    display: inline-block;
    width: calc(100% - 18px);
    height: 100%;
    border-right: 2px solid #232324 ;
}

.content-box .left-content .content-area .top{
    position: relative;
    height: 40px;
    width: 100%;
    border-bottom: 1px solid RGB(83, 83, 83) ;
    color: #A7A7A7;
    z-index: 998;
}

.content-box .left-content .content-area .top .progress {
    float: left;
    width: 100px;
    line-height: 40px;
    text-align: center;
}

.content-box .left-content .content-area .top .screen {
    float: right;
    width: 70px;
    line-height: 40px;
    height: 39px;
    text-align: center;
    cursor: pointer;
    color: #a7a7a7;
    background: #353537;
    border: none;
}

.content-box .left-content .content-area .info-box {
    position: relative;
    overflow-x:hidden;
    overflow-y: hidden;
    height: calc(100% - 40px);
}


.content-box .left-content .content-area .info-box:hover {
    overflow-y: auto;
}

.left-content.active .info-box {
    /*flex第一次使用*/
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.content-box .left-content .content-area .info-box .item{
    position: relative;
    width: 250px;
    height: auto;
    margin-bottom: 10px;
    display: inline-block;
    float: left;
}

/*选种状态*/
.content-box .left-content .content-area .info-box .item.checked {
    background: #565656;
    width: 250px;
}

.content-box .left-content .content-area .info-box .select {
    position: absolute;
    width: 20px;
    height: 50%;
    cursor: pointer;
}

.content-box .left-content .content-area .info-box .select:hover input{
    border: 1px solid #287bff;
}

.content-box .left-content .content-area .info-box .select input {
    width:15px;
    height:15px;
    border-radius:1px;
    border:1px solid #4d4d4d;
    top: 60px;
    position: absolute;
    transform: translateY(-50%);
    display: inline-block;
    cursor: pointer;
    -webkit-appearance: none;
}

.content-box .left-content .content-area .info-box .select input:checked {
    background: #287bff;
    position: relative;
}

.content-box .left-content .content-area .info-box .select input:checked:after {
    content: "";
    width: 12px;
    height: 10px;
    color: #fff;
    line-height: 10px;
    position: absolute;
    top: 1px;
    left: 1px;
    background: url(/assstatic/images/yes.svg) no-repeat;
}

.content-box .left-content .content-area .info-box .img-box {
    width: 190px;
    height: auto;
    margin-left: 24px;
}


.content-box .left-content .content-area .info-box .img-box .img{
    width: 190px;
    height: 110px;
}

.content-box .left-content .content-area .info-box .img-box img.check{
    border: 3px solid #e6d055;
}

.content-box .left-content .content-area .info-box .img-box img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.5);
    border-radius: 1px;
    border: 1px solid rgba(100,100,101,1);
}

.content-box .left-content .content-area .info-box .img-box .img-name {
    font-size: 14px;
    color: #A7A7A7;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.content-box .left-content .content-area .info-box .img-box .attribute {}

.content-box .left-content .content-area .info-box .img-box .attribute .sign{
    position: relative;
    display: inline-block;
    line-height: 24px;
    padding: 2px 20px 2px 10px;
    color: #fff;
    background: #0080ff;
    margin: 5px 5px 5px 0;
    text-align: center;
    cursor: pointer;
    pointer-events: none;
    word-break: break-all;
}

.content-box .left-content .content-area .info-box .img-box .attribute .sign:after {
    content: '';
    pointer-events: auto;
    position: absolute;
    width: 15px;
    top: 7px;
    height: 15px;
    right: 2px;
    color: red;
    background: url(/assstatic/images/del.svg) no-repeat;
}


.content-box .left-content .content-area .info-box .img-box .attribute .sign:hover:after {
    background: url(/assstatic/images/del_hov.svg) no-repeat;
}

.content-box .left-content .content-area .info-box .img-box .attribute .sign:before {
    pointer-events: auto;
    position: absolute;
    height: 13px;
    width: 13px;
    top: 8px;
    border-radius: 20px;
    right: 4px;
    background: rgba(0,0,0,0.2);
}


.content-box .left-content .content-area .info-box .img-box .attribute .sign.result {
    padding: 2px 10px;
}

.content-box .left-content .content-area .info-box .img-box .attribute .sign.result:after {
    content: none;
}

.content-box .left-content .content-area .info-box .img-box .attribute .sign.result:before {
    content: none;
}

    /*左侧放大区域*/
.content-box .left-content .zoom-area {
    position: relative;
    /* display: inline-block; */
    float: right;
    width: 18px;
    height: 100%;
    /*background: RGBA(40, 123, 255, 0);*/
    background-color: #21232a;
    cursor: pointer;
}


.content-box .left-content .zoom-area:hover {
    background: RGBA(40, 123, 255, 0.27);
}

.content-box .left-content .zoom-area span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(167, 167, 167);
    font-size: 16px;
}


/*中间区域*/
.middle-content {
    position: relative;
    /* padding-left: 530px; */
    height: 100%;
    width: calc(100% - 530px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    display: inline-block;
}

.middle-content .big-img {
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle-content .big-img .img{
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 5px;
    float: left;
}

.middle-content .big-img .title {
    font-size: 14px;
    color: #A7A7A7;
    line-height: 40px;
}

.middle-content .big-img .complete {
    display: inline-block;
    float: right;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    background: #14CB6B;
    padding: 0 20px;
    cursor: pointer;
    border-radius: 1px;
    margin-top: 10px;
}

.middle-content .big-img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
}

.middle-content .big-img .picview img {
    max-width: none;
    max-height: none;
}



/*右侧标签*/
.right-content {
    display: inline-block;
    width: 220px;
    height: 100%;
    /* float: left; */
    text-align: left;
    /*border-left: 1px solid #ccc;*/
}


.slot-head .openSlotSelect{
    float: left;
    width: 80px;
    background-image: url("") !important;
    background-repeat: no-repeat !important;
    background-position: 35px 14px !important;
    cursor: pointer;
    line-height: 40px;
    font-size: 14px;
}
.slot-head .openSlotSelect.active{
    background-image: url("") !important;

}
.slot-head .slotSelectType{
    float: right;
    line-height: 40px;
}
.slot-head .slotSelectType span{
    margin:0 5px;
    cursor: pointer;
}
.slot-head .slotSelectType span.active{
    color: #14CB6B;
}



.content-slot{
    float: left;
    margin-left: 20px;
    height: 100%;
}
.content-slot .slot-head{
    width: 200px;
    height: 30px;
    color: #909193;
}
.content-slot .slot-list{
    width: 200px;
    /*border: 1px solid red;*/
    height: calc( 100% - 50px );
    overflow: hidden;
    margin: 0;
    padding: 0;
    text-align: left;
}
.content-slot .slot-list .list-item{
    width: 100%;
    height: 34px;
    background: blue;
    color: #fff;
    margin-bottom: 5px;
    border-radius:4px;
    line-height: 34px;
    padding-left: 16px;
    position: relative;
    opacity: 0.7;
    cursor: pointer;
    overflow: hidden;
    /*新增*/
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}
.content-slot .slot-list .list-item:hover{
    opacity: 1;
}
.content-slot .slot-list.choose .list-item.selecting{
    opacity: 0.3;
}
.content-slot .slot-list.choose .list-item.selecting:hover{
    opacity: 0.7;
}
.dark-theme .content-slot .slot-list.choose .list-item.active{
    opacity: 1 !important;
    border: 2px solid #fff;
    box-sizing: border-box;
}
.content-slot .slot-list.choose .list-item.active{
    opacity: 1 !important;
    box-sizing: border-box;
}

.content-slot .slot-list .list-item span{
    /*content: attr(data-index);*/
    width: 34px;
    height: 32px;
    position: absolute;
    background:rgba(0,0,0,0.3);
    right: 0px;
    top:1px;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.content-slot .slot-list .list-item:hover span{
    transition: all .45s;
    width: 0px;
}


/* 黑色主题 */
.dark-theme{
    background: #21232A !important;
}
.dark-theme .middle-content-item>td{
    border-left: 1px solid rgba(54,54,55,1);
    border-bottom: 1px solid #000000;
    background: #282829;
    color: #CACBCB;
}
.dark-theme .content-head{
    background: #2E3137 !important;
    color: #909193;
    border: 0px solid #2E3137 !important;
}
.dark-theme .content-head>td{
    background-color: #2E3137 !important;
    /*border: 0px solid #2E3137 !important;*/
}
.dark-theme .content-text .middle-content-item .select{
    background:rgba(50,50,51,1);
    box-shadow:0px 0px 1px 1px rgba(5,5,5,1),0px 2px 4px 0px rgba(0,0,0,0.5);
    border-radius:4px;
}
.dark-theme .content-text .middle-content-item .select .item:hover{
    background:rgba(76,76,76,1);
}
.dark-theme .content-text table td{
    border: 0px;
}


/*改头部样式*/
.dark-theme .head {
    background: #535353 !important;
}


/*滚动条样式*/
.info-box::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
}
/*#waveform wave:hover::-webkit-scrollbar {!*滚动条整体样式*!*/
/*width: 10px;     !*高宽分别对应横竖滚动条的尺寸*!*/
/*height: 8px;*/
/*}*/
.info-box::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px #ddd;
    background: #535353;
}
.info-box::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #333;
    border-radius: 10px;
    background: rgb(44, 49, 50);
}


.middle-content::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
}
/*#waveform wave:hover::-webkit-scrollbar {!*滚动条整体样式*!*/
/*width: 10px;     !*高宽分别对应横竖滚动条的尺寸*!*/
/*height: 8px;*/
/*}*/
.middle-content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px #ddd;
    background: #535353;
}
.middle-content::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #333;
    border-radius: 10px;
    background: rgb(44, 49, 50);
}

/*放大缩小*/
.picview {display:flex;justify-content:center;
    align-items: center;width:100%; margin:auto auto auto auto;height: 100%;overflow:hidden; }/*height: 800px*/
.picview img{flex:none;}
.zoom-marker{cursor: pointer;z-index:2;}



/*查看结果增加的样式*/
.checkData {}

.checkData span{
    line-height: 40px;
    text-align: left;
    text-indent: 20px;
    display: inline-block;
    font-size: 14px;
    padding: 0 5px;
    cursor: pointer;
}

.checkData span.active{
    color: #14CB6B;
}


.result-page .headBtn{
    display: none;
}

/*样式覆盖*/
.cut .showBox .table span i {
    height: auto !important;
}

.emptySelect{
  position: absolute;
  right: 100px;
  line-height: 40px;
  cursor: pointer;
}


.emptyAttribute {
    position: absolute;
    right: 200px;
    line-height: 40px;
    cursor: pointer;
}

.emptyAttribute:hover{
    color: #287bff;
}

.emptySelect:hover {
 color: #287bff;
}


.rule .showBox .box {
    overflow: auto !important;
}